<%-- 
    Document   : login
    Created on : 6-mar-2014, 23.22.53
    Author     : Fede
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <link href="CSS/stylelogin.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
                $('a.login-window').click(function() {

                        // Getting the variable's value from a link 
                        var loginBox = $(this).attr('href');

                        //Fade in the Popup and add close button
                        $(loginBox).fadeIn(300);

                        //Set the center alignment padding + border
                        var popMargTop = ($(loginBox).height() + 24) / 2; 
                        var popMargLeft = ($(loginBox).width() + 24) / 2; 

                        $(loginBox).css({ 
                                'margin-top' : -popMargTop,
                                'margin-left' : -popMargLeft
                        });

                        // Add the mask to body
                        $('body').append('<div id="mask"></div>');
                        $('#mask').fadeIn(300);

                        return false;
                });
                // When clicking on the button close or the mask layer the popup closed
                $('a.close, #mask').live('click', function() { 
                  $('#mask , .login-popup').fadeOut(300 , function() {
                        $('#mask').remove();  
                }); 
                return false;
                });
        });
        function imgChange2( img ) { document.login.src = img; } 
        </script>
    </head>		
    <body>
        <div class="box">
            <div class="lock">            
                <img id="lamp2" 
                onmouseover="imgChange2('Images/btn_logout_h.png')" 
                onmouseout="imgChange2('Images/btn_logout.png')" 
                src="Images/btn_logout.png" alt="lamp-off" border="0" name="login" 
                title="Logout" align="absmiddle" alt="Logout" >                               
            </div>
            <div class="log-box">
                <a href="#login-box" class="login-window">Login</a>
            </div>
            <div class="reg-box">
                <a class="reg-box" href="registrazione.jsp">Registrazione</a>
            </div>
        </div>
        <div id="login-box" class="login-popup">
            <a href="#" class="close"><img src="Images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
            <form method="get" class="signin" action="HomePage.jsp">
                <fieldset class="textbox">
                    <label class="username">
                        <span>Nome Utente</span>
                        <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                    </label>
                    <label class="password">
                        <span>Password</span>
                        <input id="password" name="password" value="" type="password" placeholder="Password">
                    </label>
                    <button class="submit button" type="submit">Sign in</button>      
                    <p>
                        <a class="forgot" href="#">Forgot your password?</a>
                    </p>                
                </fieldset>
            </form>
        </div>
    </body>
</html>
